import React, { Fragment } from "react";

export default class Droppable extends React.Component {
  state = {
    in: false
  };
  a = 0
  handleDragEnter = (e) => {
    // console.log(e, ++this.a, "打印输出")
    e.preventDefault();
    const { type } = this.props;
    if (type == "produce") {
      return;
    }
    if (this.props.canDragIn) {
      this.setState({
        in: true
      });
    }
  };

  handleDragLeave = (e) => {
    e.preventDefault();
    const { type } = this.props;
    if (type == "produce") {
      return;
    }
    if (this.props.canDragIn) {
      this.setState({
        in: false
      });
    }
  };

  handleDrop = (e) => {
    e.preventDefault();
    const { type, dragTo, region } = this.props;
    if (type == "produce") { return; }
    this.setState({ in: false });
    let id = e.dataTransfer.getData("id");
    let componentType = e.dataTransfer.getData("componentType");
    dragTo && dragTo(region, componentType, id);
  };

  render() {
    let { region, children, type, className = "" } = this.props;
    return (
      <div
        id={`col-${region}`}
        key={`col-${region}`}
        className={`col ${className}`}
        onDragEnter={this.handleDragEnter}
        onDragLeave={this.handleDragLeave}
        onDragOver={this.handleDragEnter}
        onDrop={this.handleDrop}
        draggable={false}
      >
        {/* <main className={`col-main ${this.state.in ? " active" : ""}`}> */}
        {children}
        {/* </main> */}
      </div>
    );
  }
}